<template>
  <view class="mine-page-wrap">
    <view class="mine-page">
      <mineheader
        :info="info"
        :has-auth="hasAuth"
        @toggle="handleToggleBaby"
        @edit-avatar="handleHideChildModal"
      />
      <mineContent
        :info="info"
        :other-baby="otherBaby"
        :is-show-add-baby="isShowAddBaby"
        :has-auth="hasAuth"
        @login-out="handleLoginOut"
        @toggle-child="handleToggleChild"
      />
      <!-- toast提示 -->
      <at-toast
        :is-opened="is_opened"
        :text="toastText"
        :on-close="handleCloseToast"
        :duration="0"
      />

      <!-- 退出弹窗 -->
      <at-modal
        class="custom-confirm"
        :is-opened="isShowModal"
        :close-on-click-overlay="false"
        :on-close="handleModalCancel"
        :on-cancel="handleModalCancel"
      >
        <AtModalContent>
          是否确认退出？
        </AtModalContent>
        <AtModalAction>
          <view class="modal-footer" @tap="handleLogoutOperate">
            <view data-key="logout">
              狠心离开
            </view>
            <view data-key="no-logout">
              我再想想
            </view>
          </view>
        </AtModalAction>
      </at-modal>
    </view>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
import mineheader from "./components/header";
import mineContent from "./components/content";
import addBaby from "./components/add-baby-modal";
import { baseInformation, switchLoginBaby } from "@/libs/api/mine";
import { clearToken } from "@/libs/util";
import { logout } from "@/libs/api/login";
import { checkTokenIsValid } from "@/libs/api/base-api";
import { AtModalAction, AtModalContent } from "taro-ui-vue";
import basicDataSet from "@/config/basic-data-set";
import "./mine.scss";
export default {
  components: {
    mineheader,
    mineContent,
    addBaby,
    AtModalAction,
    AtModalContent
  },
  data() {
    return {
      isShowAddBaby: false,
      hasAuth: false,
      info: {}
    };
  },
  computed: {
    otherBaby() {
      return this.info?.other_babys || [];
    }
  },
  async onShow() {
    const [err] = await this.$captureCatch(checkTokenIsValid());
    if (err) {
      this.hasAuth = false;
      return;
    }
    this.hasAuth = true;
    this.getUserInfo();
  },
  onHide() {
    this.isShowModal = false;
  },
  methods: {
    handleLogoutOperate({ target: { dataset } }) {
      const { key } = dataset;
      if (key === "logout") {
        logout()
          .then(() => {
            this.isShowModal = false;
            Taro.clearStorage();
            Taro.switchTab({ url: "/pages/index/index" });
          })
          .catch(({ message }) => {
            this.isShowModal = false;
            this.$message(message);
          });
      }
      if (key === "no-logout") {
        this.isShowModal = false;
      }
    },
    /**隐藏切换孩子弹窗 */
    handleHideChildModal() {
      this.isShowAddBaby = false;
    },
    /**切换孩子 */
    handleToggleChild(data) {
      if (this.isLoading) return;
      this.isLoading = true;
      switchLoginBaby({ id: data.id })
        .then(({ data: { isJump, token = "" } }) => {
          this.isShowAddBaby = false;
          setTimeout(() => {
            this.isLoading = false;
          }, 500);
          if (isJump) {
            const info = JSON.stringify({
              ...data,
              isJump,
              phone: this.info?.purephone
            });
            Taro.navigateTo({
              url: `/pages/mine/edit-baby/index?student=${info}`
            });
            return;
          }
          clearToken();
          token && Taro.setStorageSync("token", token);
          this.getUserInfo();
          basicDataSet.setUser();
        })
        .catch(({ message }) => {
          this.$message = message;
          this.isLoading = false;
          this.isShowAddBaby = false;
        });
    },
    handleLoginOut() {
      this.isShowModal = true;
    },
    async getUserInfo() {
      const { data } = await baseInformation();
      this.info = data;
    },
    handleToggleBaby() {
      this.isShowAddBaby = !this.isShowAddBaby;
    }
  }
};
</script>
